<template>
  <div class="advise-container">
    <van-cell
      v-for="(item, index) in adviselist"
      :key="index"
      icon="search"
      @click="$emit('search', item)"
    >
      <span v-html="heightlight(keywords, item)"> </span>
    </van-cell>
  </div>
</template>

<script>
import { getSearchadvise } from '@/api/search.js'
import { debounce } from 'lodash'
export default {
  props: {
    keywords: {
      type: String,
      required: true
    }
  },
  // 定义属性
  data() {
    return {
      adviselist: []
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {
    // 配置监听变量具体参数
    keywords: {
      // 加入debounce防抖
      handler: debounce(async function(val) {
        const res = await getSearchadvise(val)
        this.adviselist = res.data.data.options
        console.log(111)
      }, 500), // 执行的操作
      immediate: true // 是否立即监听
    }
  },
  // 方法集合
  methods: {
    heightlight(keywords, val) {
      const reg = new RegExp(keywords, 'gi')
      return val.replace(reg, `<span style="color: #3296fa">${keywords}</span>`)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less"></style>
